
<script setup>
import {ref,watch} from 'vue'
const count=ref(0)
const nickname=ref('张三')

const changeCount=()=>{
  count.value++
}
const changeNickname=()=>{
  nickname.value='李四'
}

//监听单个数据的变化
watch(count,(newValue,oldValue)=>{
  console.log(newValue,oldValue),
  {
    immediate:true
  }
})

const userInfo =ref({
  name:'zs',
  age:18
})
const setUserInfo=()=>{
  userInfo.value.age++
}
watch(userInfo,(newValue)=>{
  console.log(newValue)

},{
  deep:true
})

watch(()=>userInfo.value.age,(newValue,oldValue)=>{
  console.log(newValue,oldValue)
})

setUserInfo
//监听多个数据的变化
watch([count,nickname],(newArr,oldArr)=>{
  console.log(newArr,oldArr)
})

</script>

<template>
  <div>{{ count }}</div>
  <button @click="changeCount">改数字</button>
  <div>{{ nickname }}</div>
  <button @click="changeNickname">改昵称</button>
</template>